<template>
  <div class="inserblog">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      <el-breadcrumb-item>操作标签</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 白板 -->

    <el-card class="blog-box">
      <el-row>
        <el-col :span="3" :offset="1"><h1>所有标签</h1></el-col>
        <el-col :span="4" :offset="16">
          共<span class="totle"> {{ labelNum }} </span>个</el-col
        >
      </el-row>
      <el-divider></el-divider>
      <el-tag
        type="success"
        v-for="(label, index) in labels"
        :key="index"
        closable
        @close="handleClose(label.id)"
        >{{ label.name + " | " + label.blogNum }}</el-tag
      >
      <el-divider></el-divider>
      <el-form ref="label" :model="label" label-width="80px" :rules="rules">
        <el-form-item label="标签名" prop="name">
          <el-input
            v-model="label.name"
            name="name"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('label')"
            >立即创建</el-button
          >
          <el-button @click="reSet('label')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      label: { id: 0, name: "" },
      labels: [],
      labelNum: 0,
      rules: {
        name: [
          { required: true, message: "请输入标签名称", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async getAllLabels() {
      var d = await this.$http.get("labels");
      this.labels = d.data.labels;
      this.labelNum = d.data.labelNum;
    },

    handleClose(id) {
      this.$confirm("此操作将永久删除该标签, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          var d = await this.$http.delete("label/" + id);
          if (d.code == 200) {
            this.getAllLabels();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          } else {
            this.$message({
              type: "error",
              message: "删除失败!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          var d = await this.$http.post("label", this.label);
          if (d.code == 200) {
            this.getAllLabels();
            this.$message({
              type: "success",
              message: "添加成功!",
            });
          } else {
            this.$message({
              type: "error",
              message: d.message,
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  reSet(formName) {
    this.$refs[formName].resetFields();
  },
  mounted: function () {
    this.getAllLabels();
  },
};
</script>
<style scoped>
.el-tag {
  margin: 10px 10px;
}
.totle {
  color: red;
  font-size: 1.2em;
}
</style>
